<template>
    <div class="box">

        <el-tabs :tab-position="tabPosition" style="height: 490px;">
            <el-tab-pane label="重要公告">
                <div v-for="item in books" :key="item.newsid" v-if="item.newsname == a"> <span>{{ item.newsmessage
                }}</span></div>
            </el-tab-pane>
            <el-tab-pane label="周年庆">
                <div v-for="item in books" :key="item.newsid" v-if="(item.newsname == b)"> <span>{{ item.newsmessage
                }}</span></div>
            </el-tab-pane>
            <el-tab-pane label="美好春游">
                <div v-for="item in books" :key="item.newsid" v-if="(item.newsname == c)"> <span>{{ item.newsmessage
                }}</span></div>
            </el-tab-pane>
            <el-tab-pane label="除夕夜">
                <div v-for="item in books" :key="item.newsid" v-if="(item.newsname == d)"> <span>{{ item.newsmessage
                }}</span></div>
            </el-tab-pane>
        </el-tabs>
    </div>

</template>
<script>
export default {
    name: "HomeNews",
    data() {
        return {
            tabPosition: 'left',
            books: [],
            a: "重要公告",
            b:"周年庆",
            c:"美好春游",
            d:"除夕夜"
        };
    }, mounted() {
        //用于获取books 中的数目，显示总数
        this.loadBooks();

    },
    methods: {
        loadBooks() {
            var _this = this
            this.$axios.get('/goods').then(resp => {
                if (resp && resp.status === 200) {
                    _this.books = resp.data
                }
            })
        }
    },
}
</script>
<style>

</style>